<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { addClusterHandler as addHandler, updateClusterHandler as updateHandler } from '../../api/cluster.js'
import { ElMessage } from 'element-plus'

const data = reactive({
    itemForm: {
    }
})

const props = defineProps({
    // 判断当前是创建还是更新
    method: {
        type: String,
        default: "Create"
    },
    itemForm: {
        type: Object
    }
})
const emits = defineEmits(["rollback"])
const itemFormRef = ref()
const { itemForm } = toRefs(data)
const clear = () => { // 清空表单
    itemFormRef.value.resetFields()
}

const rules = reactive({
    clusterId: [
        {required: true, message: "集群id不能为空", trigger: 'blur'},
    ],
    displayName: [
        {required: true, message: "集群别名不能为空", trigger: 'blur'},
    ],
    city: [
        {required: true, message: "城市不能为空", trigger: 'blur'},
    ],
    kubeconfig: [
        {required: true, message: "kubeconfig不能为空", trigger: 'blur'},
    ],
})



const submit = () => { // 调用创建用户接口
    itemFormRef.value.validate((valid) => {
        if (valid) {
            if (props.method == "Create") {
                addHandler(data.itemForm).then((response) => {
                    ElMessage({
                        message: response.data.message,
                        type: "success"
                    })
                    emits('rollback')
                })
            }else {
                updateHandler(data.itemForm).then((response) => {
                    ElMessage({
                        message: response.data.message,
                        type: "success"
                    })
                    emits('rollback') //回调
                })
            }
        }else {
            ElMessage({
                message: "请完善表单内容",
                type: "warning"
            })
            emits('rollback')
        }
    })
}
onMounted(() => {
    console.log("props.itemForm",props.itemForm)
    data.itemForm = JSON.parse(JSON.stringify(props.itemForm))
})
</script>

<template>
    <el-form label-width="140px" :rules="rules" ref="itemFormRef" :model="itemForm">
        <!-- 集群配置基本信息 -->
        <div class="cluster-info">
            <div>
                <el-form-item prop="clusterId" class="form-item" label="集群ID" required>
                    <el-input v-model="itemForm.clusterId" autocomplete="off" placeholder="ID不可重复" :disabled="props.method=='Edit'"/>
                </el-form-item>

                <el-form-item prop="displayName" class="form-item" label="集群名称" required>
                    <el-input v-model="itemForm.displayName" autocomplete="off" placeholder="请输入集群别名"/>
                </el-form-item>

                <el-form-item class="form-item" label="位置" required>
                    <el-col :span="10">
                        <el-form-item prop="city" required>
                            <el-input v-model="itemForm.city" autocomplete="off" placeholder="城市" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">-</el-col>
                    <el-col :span="10">
                        <el-form-item prop="district">
                            <el-input v-model="itemForm.district" autocomplete="off" placeholder="区县" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
            </div>
            <!-- kubeconfig -->
            <div>
                <el-form-item prop="kubeconfig" style="width: 600px;" label-width="120" required>
                    <el-input v-model="itemForm.kubeconfig" :rows="6" autocomplete="off" type="textarea" />
                </el-form-item>
            </div>
        </div>


      <span class="span-button" style="display: block; margin-top: 30px auto;">
        <el-button @click="clear()">清空</el-button>
        <el-button type="primary" @click="submit()">{{ props.method == "Create"? "添加": "更新" }}</el-button>
      </span>
    </el-form>
</template>

<style scoped>
.form-item {
    width: 420px;
    margin: 0 auto 20px 0;
}
.cluster-info {
    display: flex;
    flex-direction: row;
}
</style>
